<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" style="padding:100px 50px 10px;">
            <button type="button" class="btn btn-default popover-show"
            title="popover title" data-container="body"
            data-toggle="popover" data-poacement="left" 
            data-content="左侧的popover中的一些内容--show方法">
            左侧的popover
            </button>
            <button type="button" class="btn btn-primary popover-hide"
            title="popover title" data-container="body" 
            data-toggle="popover" data-placement="top"
            data-content="顶部的popover中的一些内容=hide方法">
            定不得popover
            </button>
            <button type="button" class="btn btn-warning popover-toggle"
            title="popover title" data-container="body"
            data-toggle="popover" data-placement="right"
            data-content="左侧的popover中的一些内容--toggle方法"> 
            右侧的popover
            </button>
           <br> <br> <br>
           <p class="popover-options"> 
                <a href="#" type="button" class="btn btn-warning"
                title="<h2>Title</h2>"
                data-container="body" data-toggle="popover"
                data-content="<h4>popover种的一些内容--options方法</h4>">popover</a>
           </p>


           <script>
               $(function (){$('.popover-show').popover('show')});  //显示元素弹出框
               $(function (){$('.popover-hide').popover('hide')});      //隐藏元素弹出框
               $(function() {$('.popover-destroy').popover('destroy')});   //隐藏并销毁
               $(function() {$('popover-toggle').popover('toggle')});  //   切换隐藏或显示元素弹出框
                $(function(){$(".popover-options a").popover({html:true})})  //
           </script>
    </div>
</body>
</html>